<template>
  <div class="geci" @touchmove="move" ref="geci" @touchend="end" @touchstart="start">
  	<ul class="geci_list" ref="geci_list" v-if="lyric.length>0">
  		<li v-for="(item,index) in lyric" :key="index" :class="index==$store.state.action?'geci_li on':'geci_li'" :time="item.time" ref="geci_li"><img class="geciplay" @click="bofang(item.time)" v-if="index==playshowIndex" :src="require('../../assets/img/geciplay.png')" alt="">{{item.name}}</li>
  	</ul>
    <div class="wu" v-if="lyric.length==0">无歌词</div>
  </div>
</template>

<script>
   export default{
     props:['lyric'],
     data(){
       return{
         //translateY的移动倍数
         n:1,

         //歌词可视盒子在视口中触摸的y坐标
         y:0,
         y0:0,
         playshowIndex:null,//歌词前面的播放图标
       }
     },
     methods:{
       //点击歌词前面的播放按钮
       bofang(time){

         // var time2 = time.substr(1,time.length-2)
         var time3 = parseFloat(time.substr(1, 3)) * 60 + parseFloat(time.substr(4, 9))
         var audio = document.querySelector('audio')
         console.log(time,time3,audio.currentTime)
         audio.pause();
         audio.currentTime = time3;
         // this.$store.state.startTime = time3
       },
       offSet(curEle) {
           var totalLeft = null;
           var totalTop = null;
           var par = curEle.offsetParent;
           //首先把自己本身的相加
           totalLeft += curEle.offsetLeft;
           totalTop += curEle.offsetTop;
           //现在开始一级一级往上查找，只要没有遇到body，我们就把父级参照物的边框和偏移相加
           while (par){
               if (navigator.userAgent.indexOf("MSIE 8.0") === -1){
                   //不是IE8我们才进行累加父级参照物的边框
                   totalTop += par.clientTop;
                   totalLeft += par.clientLeft;
               }
               //把父级参照物的偏移相加
               totalTop += par.offsetTop;
               totalLeft += par.offsetLeft;
               par = par.offsetParent;
           }
           return totalTop;
           //返回一个数组，方便我们使用哦。
       },
       start(e){
         var geci_list=this.$refs.geci_list;
         var g = geci_list.style.transform;
         var dangqianY = Math.floor(geci_list.style.transform.substring(12,g.length-3)*100)/100;
         this.y0=e.touches[0].clientY+dangqianY;//移动的时候把移动坐标赋值给y
       },
       move(e){
         this.$store.state.zhuangtai=false//触摸的时候禁止歌词盒子的translateY值移动
         this.y=e.touches[0].clientY;//移动的时候把移动坐标赋值给y
         var geci_list=this.$refs.geci_list;
         var h=geci_list.offsetHeight
         //向上滑动
         if(this.y-this.y0<10){
           this.$store.state.m=-(this.y0-this.y);
           geci_list.style.transform="translateY("+this.$store.state.m+"px)"
         }
         var xishu = document.querySelector('.geci_list .geci_li').offsetHeight;//歌词的行高
         this.playshowIndex = Math.ceil(-this.$store.state.m/xishu)+3;//显示歌词播放图标
       },
       end(){
         setTimeout(()=>{
            this.$store.state.zhuangtai=true//触摸结束的时候启用歌词盒子的translateY值移动
            this.playshowIndex = null//隐藏歌词播放图标
         },2500)
       }
     },
     mounted(){
      this.$nextTick(()=>{
        var store=this.$store.state;
           setTimeout(()=>{
             if(store.list[store.musicIndex].lyric.length!=0){
                  //获取自适应的歌词li高度
                  // this.$store.state.liHeight=this.$refs.geci_li[0].offsetHeight;
                  var arr=[];
                  var demo=0
                  this.$refs.geci_li.forEach((item)=>{
                     demo+=item.offsetHeight
                     arr.push(demo);
                  })
                 this.$store.state.liHeight=arr;
                  //把歌词盒子对象传到vuex处理
                  this.$store.state.ge=this.$refs.geci_list;
             }else{
               this.$store.state.liHeight=0;
                this.$store.state.ge=null
             }


           },100)

      })
     }
   }
</script>

<style>
  .geci ul{
  	list-style: none;
  	padding-inline-start: 0px;
  	font-size: 30px;
  	line-height: 50px;
    padding: 0 17%;
  }
  .geci{
  	height: 600px;
  	margin-top: 100px;
    overflow: hidden;
  }
  .geci_list{
    transform: translateY(0);
  }
  .on{
  	color: red;
    font-size: 35px;
  }
  .wu{
    font-size: 30px;
    text-align: center;
  }
  .geciplay{
    width: 25px;
    margin-right: 20px;
  }
</style>
